<!DOCTYPE html>
<html>
	<head>
		<title>Henry At Your Service</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
		<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
		<link rel="stylesheet" href="css/nouislider.fox.css" />
		<link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="css/henry.css" />
		<script src="js/jquery.js"></script> 
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<!-- <script async src="js/jquery.nouislider.min.js"></script> -->
		<script src="js/jquery.nouislider.min.js"></script>
		<!--  <script async src="js/bootstrap-tooltip.js"></script>
		<script src="js/bootstrap-popover.js"></script>
		<script src="js/bootstrap.min.js"></script> -->
		<script src="js/henry.js"></script>
		<script>
			window.onload = function(){
				$(document).tooltip();
				$(document).click(function(){
					$("div.ui-tooltip").hide();					
				});
			};
			
			var answersArray = new Array();
			var tout;
			var ajaxObject = false;
			
			// this is our object which gives us access
			// to Ajax functionality

			function doAjaxQuery(url, responseAction) {
				ajaxObject = false;
				if (window.XMLHttpRequest) {// if we're on Gecko (Firefox etc.), KHTML/WebKit (Safari/Konqueror) and IE7
					ajaxObject = new XMLHttpRequest();
					// create our new Ajax object
					if (ajaxObject.overrideMimeType) {// older Mozilla-based browsers need some extra help
						ajaxObject.overrideMimeType('text/xml');
					}
				} else if (window.ActiveXObject) {// and now for IE6
					try {// IE6 has two methods of calling the object, typical!
						ajaxObject = new ActiveXObject("Msxml2.XMLHTTP");
						// create the ActiveX control
					} catch (e) {// catch the error if creation fails
						try {// try something else
							ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
							// create the ActiveX control (using older XML library)
						} catch (e) {
						} // catch the error if creation fails
					}
				}
				if (!ajaxObject) {// if the object doesn't work
					// for some reason it hasn't worked, so show an error
					alert('Sorry, your browser seems to not support this functionality.');
					return false;
					// exit out of this function
				}
				ajaxObject.onreadystatechange = (responseAction == "body")?ajaxResponseBody:ajaxResponseNewWindow;
				// when the ready state changes, run this function
				// DO NOT ADD THE () AT THE END, NO PARAMETERS ALLOWED!
				ajaxObject.open('GET', url, true);
				// open the query to the server
				ajaxObject.send(null);
				// close the query
				
				// and now we wait until the readystate changes, at which point
				// ajaxResponse(); is executed
				
				return true;
			}// end function doAjaxQuery
			
			function ajaxResponseBody() {// this function will handle the processing
				// N.B. - in making your own functions like this, please note
				// that you cannot have ANY PARAMETERS for this type of function!!
				if (ajaxObject.readyState == 4) {// if ready state is 4 (the page is finished loading)
					if (ajaxObject.status == 200) {// if the status code is 200 (everything's OK)
						// here is where we will do the processing
						var s=document.createElement('script'); // create script element
						s.src= ajaxObject.responseText;
						document.body.appendChild(s); // Send the response url to the callback function: "_cb_findItemsAdvancedResponse"
					}// end if
					else {// if the status code is anything else (bad news)
						alert('There was an error. HTTP error code ' + ajaxObject.status.toString() + '.');
						return;
						// exit
					}
				} // end if
				// if the ready state isn't 4, we don't do anything, just
				// wait until it is...
			} // end function ajaxResponse
			
			function ajaxResponseNewWindow() {// this function will handle the processing
				// N.B. - in making your own functions like this, please note
				// that you cannot have ANY PARAMETERS for this type of function!!
				if (ajaxObject.readyState == 4) {// if ready state is 4 (the page is finished loading)
					if (ajaxObject.status == 200) {// if the status code is 200 (everything's OK)
						// here is where we will do the processing
						//window.open(ajaxObject.responseText);
						//var s=document.createElement('script'); // create script element
						//alert(ajaxObject.responseText);
						var w= window.open('about:blank');
						w.document.write(ajaxObject.responseText);
						w.focus();
					}// end if
					else {// if the status code is anything else (bad news)
						alert('There was an error. HTTP error code ' + ajaxObject.status.toString() + '.');
						return;
						// exit
					}
				} // end if
				// if the ready state isn't 4, we don't do anything, just
				// wait until it is...
			} // end function ajaxResponse
		</script>
	</head>
	
	<body>
		<script>
			var start = 0;
			var items;
		
			function _cb_findItemsAdvancedResponse(root) { // The callback function
				items = root.findItemsAdvancedResponse[0].searchResult[0].item || []; // Items returned from JSON request
				var margins = [[0,50,0,0],[0,50,0,0],[0,0,0,0],[50,50,0,160],[50,0,0,0]]; // Margins of laptops 1-5
				
				$("#content").hide(); // Removes all the content that is on the screen
				$(".results").show(); // Shows the results
	
				for (var i = 0; i < 5; ++i) {
					var laptop = "#laptop" + (i +1); // Laptop element
					var laptopMargin = margins[i][0] + "px " + margins[i][1] + "px " + margins[i][2] + "px " + margins[i][3] + "px"; // Laptop margin
					$(laptop).css({"margin":laptopMargin,"position":"relative","float":"left","width":"240px","height":"300px","padding":"0.4em"});
					getNextDetails(i);
				} 
			} // End of callback function
			
			function collapse_extend(type, Id) {
				var imageId = "img#" + type + Id + "img";
				var imageSrc = $(imageId).attr("src");
				
				switch(imageSrc){
					case "img/cart.bmp":
						$(imageId).attr("src","img/cart_extended.bmp");
						$(imageId).attr("width","150");
						$(imageId).attr("height","50");
						break;
					case "img/cart_extended.bmp":
						$(imageId).attr("src","img/cart.bmp");
						$(imageId).attr("width","25");
						$(imageId).attr("height","25");
						break;
					case "img/star_like_a_glove.png":
						$(imageId).attr("src","img/star_like_a_glove_extended.png");
						$(imageId).attr("width","100");
						$(imageId).attr("height","50");
						break;
					case "img/star_like_a_glove_extended.png":
						$(imageId).attr("src","img/star_like_a_glove.png");
						$(imageId).attr("width","25");
						$(imageId).attr("height","25");
						break;
					case "img/star_this_can_fit.png":
						$(imageId).attr("src","img/star_this_can_fit_extended.png");
						$(imageId).attr("width","100");
						$(imageId).attr("height","50");
						break;
					case "img/star_this_can_fit_extended.png":
						$(imageId).attr("src","img/star_this_can_fit.png");
						$(imageId).attr("width","25");
						$(imageId).attr("height","25");
						break;
					case "img/star_not_suitable_for_you.png":
						$(imageId).attr("src","img/star_not_suitable_for_you_extended.png");
						$(imageId).attr("width","100");
						$(imageId).attr("height","50");
						break;
					case "img/star_not_suitable_for_you_extended.png":
						$(imageId).attr("src","img/star_not_suitable_for_you.png");
						$(imageId).attr("width","25");
						$(imageId).attr("height","25");
						break;
				}
			}
			
			function viewChoices(){
				var urlForGet = "getChoices.php?arr[]="+answersArray[0];
				for (var i=1;i<answersArray.length;i++){
					urlForGet += "&arr[]="+answersArray[i];
				}
				doAjaxQuery(urlForGet, "newWindow");
			}
			
			function getNextDetails(Id){
				var laptopH = "#laptop" + (Id +1) + "> h3";  // Laptop picture
				var laptopP = "#laptop" + (Id +1) + "> p"; // Laptop description
				var laptopBuy = "#buy" + (Id +1); // Laptop "Buy" button
				var laptopBuyA = "#buy" + (Id +1) + "> a"; // Laptop "Buy" button
				var laptopClose = "#close" + (Id + 1); // Laptop "Close" button
				var laptopStar = "#star" + (Id + 1);
				
				if(start < items.length){
					var item     = items[start];
					var title    = item.title;
					var pic      = item.galleryURL;
					var viewitem = item.viewItemURL;
					
					// Assign HTML + CSS to the results
					$(laptopH).html("<a href='" + viewitem + "' target='_blank'><img src='" + pic + "' width=150 height=50></img></a>");
					$(laptopH).css({"padding":"1.0em","text-align":"center","background-color":"white"});
					
					$(laptopP).html(title);
					
					if(start <5)
						$(laptopBuy).html("<a href='" + viewitem + "' target='_blank'>" + $(laptopBuy).html() + "</a>");
					else $(laptopBuyA).attr("href", viewitem);
					
					$(laptopBuy).css({"position":"absolute", "bottom":"0", "right":"0"});
					$(laptopClose).css({"position":"absolute","top":"20px","right":"10px"});
					$(laptopClose).hide();
					start++;
				}
				else{
					$(laptopH).html("No Results");
					$(laptopP).html("No Results");
					$(laptopBuyA).removeAttr("href");
					$(laptopBuy).hide();
					$(laptopStar).removeAttr("onclick");
					$(laptopStar).hide();
				}
			}
			
			/*function showValue(divName, rangeName){
				var divId = "#" + divName;
				var rangeId = "#" + rangeName;
				$(divId).html($(rangeId).val());
			}*/
		</script>
		<div id="wrapper">
			<div id="header">
				<div class="navbar">
					<div class="navbar-inner">
						<a class="brand" href="http://www.henryatyourservice.com"><img src="img/Henry logo.png" alt="Henry At Your Service"/> </a>
						<a style="position:relative;top:40px;" href='http://rover.ebay.com/rover/1/711-53200-19255-212/1?campid=5337383157&toolid=7115320019255212&customid=Henry&mpvc='><img border='0px' src='http://rover.ebay.com/ar/1/711-53200-19255-212/1?campid=5337383157&toolid=7115320019255212&customid=Henry&mpt=[CACHEBUSTER]&adtype=1&size=728x90&mpvc=' alt='Click Here'></a>
					</div>
				</div>
				<div class="progress progress-striped active">
					<div id="s1" class="bar bar-info" style="width: 20%;">
						<a class="stage" href="#" onclick="hide_to_stage(s1,0);">Purpose of use</a>
					</div>
					<div id="s2" class="bar bar-error" style="width: 20%;">
						<a class="stage" href="#" onclick="hide_to_stage(s2,answersArray);">Measures</a>
					</div>
					<div id="s3" class="bar bar-info" style="width: 20%;">
						<a class="stage" href="#" onclick="hide_to_stage(s3,answersArray);">Battery</a>
					</div>
					<div id="s4" class="bar" style="width: 20%;">
						<a class="stage" href="#" onclick="hide_to_stage(s4,answersArray);">Design</a>
					</div>
					<div id="s5" class="bar bar-info" style="width: 20%;">
						<a class="stage" href="#" onclick="hide_to_stage(s5,answersArray);">Money</a>
					</div>
				</div>
			</div> <!-- end of header -->
			<div id="content">
				
				<p class="speech">
					Hello! I'm Henry.<br/> Let's find the right laptop for you together.
					<br/>This only takes a few seconds.
					
					<button class="btn-large" name="continue" type="button" onclick="stage1();">continue</button>
				</p>
				<!--HENRY OVER HERE-->
						<img class="henry" src="./img/henry.png" alt="henry"/>
				<!-- ------------- -->
				<!--
				<table>
					<tr>
						<td>
						<!--HENRY OVER HERE--
						<img class="henry" src="./img/henry.png" alt="henry"/>
						<!-- ------------- --
						</td>
						<td>
						<p class="speech">
							Hello! I'm Henry.<br/> Let's find the right laptop for you together.
							<br/>This only takes a few seconds.
							
							<button class="btn-large" name="continue" type="button" onclick="stage1();">continue</button>
						</p>
						</td>
					</tr>
				</table>-->
				<script>
				function finish(){
					var urlForGet = "findItemsAdvanced.php?arr[]="+answersArray[0];
					for (var i=1;i<answersArray.length;i++){
						urlForGet += "&arr[]="+answersArray[i];
					}
					document.getElementsByClassName('speech')[0].innerHTML= "Looking for the right Laptops for you...";
					doAjaxQuery(urlForGet, "body");
				}
				</script>
			</div><!-- end of content -->
			
			<div class="results" style="display: none"> <!-- Results template -->
					<div id="laptop1" class="ui-widget-content ui-corner-all" onmouseover="$(close1).show()" onmouseout="$(close1).hide()">
						<div id="close1" onclick="getNextDetails(0)"><img src="img/close.bmp" width=25 height=25></div>
						<h3 class="ui-widget-header ui-corner-all">No Results</h3>
						<p>No Results</p>
						<div id="buy1"><img id="buy1img" src="img/cart.bmp" width=25 height=25 onmouseover="collapse_extend('buy',1)" onmouseout="collapse_extend('buy',1)"></div>
						<div id="star1" onclick="viewChoices()"><img id="star1img" src="img/star_like_a_glove.png" width=25 height=25 onmouseover="collapse_extend('star',1)" onmouseout="collapse_extend('star',1)"></div>
					</div>
					<div id="laptop2" class="ui-widget-content ui-corner-all" onmouseover="$(close2).show()" onmouseout="$(close2).hide()">
						<div id="close2" onclick="getNextDetails(1)"><img src="img/close.bmp" width=25 height=25></div>
						<h3 class="ui-widget-header ui-corner-all">No Results</h3>
						<p>No Results</p>
						<div id="buy2"><img id="buy2img" src="img/cart.bmp" width=25 height=25 onmouseover="collapse_extend('buy',2)" onmouseout="collapse_extend('buy',2)"></div>
						<div id="star2" onclick="viewChoices()"><img id="star2img" src="img/star_like_a_glove.png" width=25 height=25 onmouseover="collapse_extend('star',2)" onmouseout="collapse_extend('star',2)"></div>
					</div>
					<div id="laptop3" class="ui-widget-content ui-corner-all" onmouseover="$(close3).show()" onmouseout="$(close3).hide()">
						<div id="close3" onclick="getNextDetails(2)"><img src="img/close.bmp" width=25 height=25></div>
						<h3 class="ui-widget-header ui-corner-all">No Results</h3>
						<p>No Results</p>
						<div id="buy3"><img id="buy3img" src="img/cart.bmp" width=25 height=25 onmouseover="collapse_extend('buy',3)" onmouseout="collapse_extend('buy',3)"></div>
						<div id="star3" onclick="viewChoices()"><img id="star3img" src="img/star_like_a_glove.png" width=25 height=25 onmouseover="collapse_extend('star',3)" onmouseout="collapse_extend('star',3)"></div>
					</div>
					<div id="laptop4" class="ui-widget-content ui-corner-all" onmouseover="$(close4).show()" onmouseout="$(close4).hide()">
						<div id="close4" onclick="getNextDetails(3)"><img src="img/close.bmp" width=25 height=25></div>
						<h3 class="ui-widget-header ui-corner-all">No Results</h3>
						<p>No Results</p>
						<div id="buy4"><img id="buy4img" src="img/cart.bmp" width=25 height=25 onmouseover="collapse_extend('buy',4)" onmouseout="collapse_extend('buy',4)"></div>
						<div id="star4" onclick="viewChoices()"><img id="star4img" src="img/star_this_can_fit.png" width=25 height=25 onmouseover="collapse_extend('star',4)" onmouseout="collapse_extend('star',4)"></div>
					</div>	
					<div id="laptop5" class="ui-widget-content ui-corner-all" onmouseover="$(close5).show()" onmouseout="$(close5).hide()">
						<div id="close5" onclick="getNextDetails(4)"><img src="img/close.bmp" width=25 height=25></div>
						<h3 class="ui-widget-header ui-corner-all">No Results</h3>
						<p>No Results</p>
						<div id="buy5"><img id="buy5img" src="img/cart.bmp" width=25 height=25 onmouseover="collapse_extend('buy',5)" onmouseout="collapse_extend('buy',5)"></div>
						<div id="star5" onclick="viewChoices()"><img id="star5img" src="img/star_this_can_fit.png" width=25 height=25 width=25 height=25 onmouseover="collapse_extend('star',5)" onmouseout="collapse_extend('star',5)"></div>
					</div>
				</div><!-- End of results template -->
				
			<div id="footer" style="position:fixed; overflow:auto; display:none">
				<div class="navbar">
						<div class="navbar-inner">
							<img style="visibility:hidden;" width=50 src="img/Henry logo.png" alt="Henry At Your Service"/>
							<table style="display:inline; position:relative; left:80px;" cellpadding=10>
								<tr>
									<td><a href="http://www.hip.org.il/" style="color:black; text-decoration:none;"><b>Partners</b></a></td>
									<td><a href="http://www.henryatyourservice.com/#!how-it-works/cm8a" style="color:black; text-decoration:none;"><b>How it works</b></a></td>
								</tr>
								<tr>
									<td><a href="http://www.henryatyourservice.com/#!feedback/c1g63" style="color:black; text-decoration:none;"><b>Feedback</b></a></td>
									<td><a href="http://www.henryatyourservice.com/#!blog/c1xph" style="color:black; text-decoration:none;"><b>Blog</b></a></td>
								</tr>
								<tr>
									<td><a href="http://www.henryatyourservice.com/" style="color:black; text-decoration:none;"><b>Pricing</b></a></td>
									<td><a href="http://www.henryatyourservice.com/#!contact/c1d94" style="color:black; text-decoration:none;"><b>Contact</b></a></td>
								</tr>
								<tr>
									<td><a href="http://www.henryatyourservice.com/#!terms-of-use/cmdz" style="color:black; text-decoration:none;"><b>Terms of use</b></a></td>
								</tr>
							</table>
							<table style="display:inline;" cellpadding=5>
								<tr>
									<td><a href="https://www.facebook.com/Henryatyourservice/info"><img src="http://static.wixstatic.com/media/b1cd13f9d4dfb1450bbb325285106177.png_srz_25_25_85_22_0.50_1.20_0.00_png_srz"></img></a></td>
									<td><a href="https://plus.google.com/117167403531518744294"><img src="http://static.wixstatic.com/media/806f5f56d9a7b8849f2f2ea71ff5c0cc.png_srz_25_25_85_22_0.50_1.20_0.00_png_srz"></img></a></td>
									<td><a href="http://www.linkedin.com/profile/connections?id=215973303&trk=hb_ntf_ACCEPTED_YOUR_CONNECTION_REQUEST"><img src="http://static.wixstatic.com/media/b698463bdec2cc6d1946e712ae0528ac.png_srz_25_25_85_22_0.50_1.20_0.00_png_srz"></img></a></td>
								</tr>
							</table>
							<table style="float: right;" cellpadding=5>
								<tr>
									<td><a href="http://www.henryatyourservice.com/#!CONTACT/c1d94"><img src="http://static.wixstatic.com/media/41d000_923783bd05e9f6dfd45827c8952a3e5b.png_srz_25_36_75_22_0.50_1.20_0.00_png_srz"></img></a></td>
									<td><b>+972-52-441-36-73</b></td>
								</tr>
								<tr>
									<td><a href="http://www.henryatyourservice.com/#!CONTACT/c1d94"><img src="http://static.wixstatic.com/media/41d000_234c0c521a8017939900379e6a25b05c.png_srz_34_19_75_22_0.50_1.20_0.00_png_srz"></img></a></td>
									<td><b>henryatyourservice@gmail.com</b></td>
								</tr>
							</table>
						</div>
				</div>
				<!-- Icons from <a href="http://thenounproject.com/" target="_blank">The Noun Project</a>
				<p>&copy; Copyright by HenryAtYourService 2013</p> -->
			</div> <!-- end of footer -->
		</div> <!-- end of wrapper --> 
	</body>
</html>